<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览-最share</title>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/base.css">
    <!-- <link rel="stylesheet" href="css/font.css"> -->
    <link rel="stylesheet" href="css/browse.css">

</head>

<body>

    <!-- 顶部 -->
    <div class="large">
        <header id="nav" v-cloak>
            <a href="/index.html">
                <div class="logo">
                    <img src="images/logo.png" alt="">
                </div>
            </a>

            <!-- 没有登录显示登录注册按钮 -->
            <span v-show="!isLogin">
                <a href="/register.html" class="register">注册</a>
                <a href="/login.html" class="login">登录</a>
        </span>

            <!-- 登录之后显示个人中心 -->
            <div v-show="isLogin">
                <div class="message">
                    <a href="/chat.html">
                        <img src="images/msg_1.png" alt="">
                        <span v-if="unread">{{unread}}</span>
                    </a>
                </div>

                <div class="pic" @mouseenter='showMenu' @mouseleave='hiddenMenu'>
                    <img :src="userPicture" alt="">
                    <ul :style='{display: isShow}'>
                        <a>
                            <li @click='logout'>
                                <span>退出</span>
                            </li>
                        </a>
                    </ul>
                </div>

            </div>

        </header>
    </div>


    <!-- 浏览项目 -->
    <div class="box1" id="box1" v-cloak>
        <!-- 搜索框 -->
        <div class="search">
            <form action="#">
                <input type="search" placeholder="搜索用户名、邮箱等" v-model="searchInfo">
                <input type="submit" value="" @click.prevent="search">
            </form>
        </div>


        <!-- 平台用户列表 -->
        <div class="project">
            <ul>
                <!-- 每一个li为一个招聘信息 -->
                <li class="projectInfo" v-for="(item,index) in users" :key="item.uid">
                    <span class="telephone">电话：{{item.telephone}}</span>
                    <span class="sex" v-if="item.sex === 1">男</span>
                    <span class="sex" v-else>女</span>
                    <div class="email">邮箱：{{item.email}}</div>
                    <div class="line"></div>
                    <div class="thridline">
                        <span class="username" v-text="item.username"></span>
                        <a href="javascript:;" @mouseenter='active(item.uid)' @mouseleave='active(-1)' @click.stop="toChat(item.username)">
                            <img src="images/chat1.png" alt="">
                            <img src="images/chat2.png" alt="" v-show="activeId === item.uid">
                        </a>
                    </div>
                </li>
            </ul>
        </div>

        <!--layui分页按钮-->
        <div id="page" class="bottom"></div>
    </div>




</body>

<script src="js/vue.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script src="js/page/isLogin.js"></script>
<script src="js/page/index.js"></script>
<script>
</script>

</html>